<script setup lang="ts">
import { inject, reactive, type Ref } from "vue";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { evaluateDoctorApi } from "@/services/consult";
import { showToast } from "vant";
import type { EvaluateDoc } from "@/types/room";
import type { ConsultOrderItem } from "@/types/consult";
const route = useRoute();
const completeEva = inject<(score: number) => void>("completeEva");
const orderDetail = inject<Ref<ConsultOrderItem>>("orderDetail");
defineProps<{ evaluateDoc?: EvaluateDoc }>();

const data = reactive({
  docId: orderDetail?.value.docInfo?.id,
  orderId: route.query.orderId,
  score: 0,
  content: "",
  anonymousFlag: false,
});
2;
const pingjia = async () => {
  if (data.content == "") return showToast("请输入评价内容");
  await evaluateDoctorApi({
    docId: data.docId as string,
    orderId: data.orderId as string,
    score: data.score,
    content: data.content,
    anonymousFlag: data.anonymousFlag ? 1 : 0,
  });
  completeEva && completeEva(data.score);
};
</script>

<template>
  <div class="pin-page">
    <div class="top" v-if="!evaluateDoc">
      <p>感谢您的评价</p>
      <p>本次在线问诊服务您还满意吗？</p>
      <van-rate
        v-model="data.score"
        :size="35"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
      <van-field
        style="background-color: #f6f7f9; margin: 10px 0; border-radius: 10px"
        v-model="data.content"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
        show-word-limit
      />
      <div class="btm">
        <van-checkbox v-model="data.anonymousFlag">匿名评价</van-checkbox>
        <van-button type="primary" @click="pingjia" round>提交评价</van-button>
      </div>
    </div>
    <div class="yipin" v-else>
      <p>感谢您的评价</p>
      <p>本次在线问诊服务您还满意吗？</p>
      <van-rate
        :modelValue="evaluateDoc.score"
        :size="35"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pin-page {
  .top {
    background-color: #fff;
    margin: 20px 0;
    padding: 10px;
    border-radius: 10px;
    p:nth-child(2) {
      margin: 10px 0 15px 0;
    }
    .btm {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .yipin {
    background-color: #fff;
    margin: 20px 0;
    padding: 10px;
    border-radius: 10px;
    p:nth-child(2) {
      margin: 10px 0 15px 0;
    }
  }
}
</style>
